<script setup>
// 你好兄弟
import Hello_Bro from './components_homepage/hello_bro.vue'
// 提交按钮
import Submit_Btn from './components_homepage/submit_btn.vue'
// 人物卡片
import Character_Card from './components_homepage/character_card.vue'
import { motion, useInView, useScroll, AnimatePresence } from 'motion-v'
import { ref, onMounted, getCurrentInstance } from 'vue'
import { thisPinia } from '@/pinia/index';
const pinia = thisPinia();
const { proxy } = getCurrentInstance()
const items = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'])
const moduleRefs = ref({})
const isInView = ref({})

const { scrollYProgress } = useScroll();

// scrollYProgress.on('change', (value) => {
// console.log('实时进度:', value);
// });

const Ref_user = ref(null)

const tabs = [
    { icon: "🍅", label: "李" },
    { icon: "🥬", label: "帅" },
    { icon: "🧀", label: "真" },
    { icon: "🥕", label: "的" },
    { icon: "🍌", label: "大" },
    { icon: "🫐", label: "牛" },
    { icon: "🥂", label: "逼" },
]

const selectedTab = ref('clear')
const selectedTabShow = ref(false)

onMounted(() => {
    moduleRefs.value = items.value.map(() => { return ref(null) })
    moduleRefs.value.map((e, index_) => {
        isInView.value[index_] = useInView(e)
    })
})

const _Show = (e) => {
    selectedTabShow.value = true
    if (e) {
        selectedTab.value = e
    }
}
const _Hide = () => {
    selectedTab.value = 'clear'
    selectedTabShow.value = false
}

const _Theme_Change = () => {
    proxy.$Theme('*')
}

const _Quit = () => {
    pinia._token('')
    proxy.$router.replace('/login')
}
</script>

<template>
    <div class="home-page">
        <motion.div class="scroll-strip" :style="{ scaleX: scrollYProgress }" />
        <div ref="Ref_user" class="user-box">
            <motion.div drag :dragConstraints="Ref_user" :dragElastic="0.2" class="box" />
        </div>
        <header class="header-box">
            <div class="nav">
                <div style="height: 34px;overflow: hidden;">
                    <div class="logo"></div>
                    <div class="text">烈焰</div>
                    <div class="theme">
                        <svg t="1748933986285" @click="_Theme_Change()" viewBox="0 0 1126 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="28023" width="48" height="48">
                            <path
                                d="M871.160938 967.449909H258.800361c-24.986092 0-45.240073-20.258505-45.240073-45.240073v-434.051354a45.240073 45.240073 0 0 1-38.942655-12.712461L45.887006 346.71087a45.244597 45.244597 0 0 1 0-63.973987L285.9625 42.656865c17.661724-17.661724 46.307739-17.666248 63.978511 0l102.717585 102.708537h221.178716L776.54585 42.656865c17.670772-17.661724 46.307739-17.661724 63.983035 0l240.07097 240.07097c17.661724 17.661724 17.661724 46.307739 0 63.983035l-128.739675 128.735151a45.235549 45.235549 0 0 1-31.984732 13.250817c-1.16267 0-2.32534-0.04524-3.474437-0.126672v211.185184c0 24.981568-20.258505 45.240073-45.240073 45.240073-24.977044 0-45.240073-20.258505-45.240073-45.240073v-305.008571a45.244597 45.244597 0 0 1 77.233853-31.989255l16.711682 16.720731 64.752117-64.752116-176.09246-176.09246-83.974623 83.974623a45.253645 45.253645 0 0 1-31.989255 13.250818H433.915634a45.253645 45.253645 0 0 1-31.989255-13.250818L317.951756 138.624631 141.854772 314.721615 206.606889 379.473731l20.199692-20.204217a45.240073 45.240073 0 0 1 77.229328 31.984732v485.710993h521.875908v-32.455228c0-24.981568 20.263029-45.240073 45.240073-45.240073 24.981568 0 45.240073 20.258505 45.240073 45.240073v77.695301c0.009048 24.986092-20.244933 45.244597-45.231025 45.244597z"
                                p-id="28024" data-spm-anchor-id="a313x.search_index.0.i22.432b3a81JH1UTE" class=""
                                fill="var(--theme-color1)"></path>
                            <path
                                d="M494.451376 598.114479a45.131497 45.131497 0 0 1-31.989256-13.250818c-17.666248-17.666248-17.670772-46.312263 0-63.987559L610.831463 372.50676c17.670772-17.666248 46.307739-17.670772 63.987559 0 17.666248 17.666248 17.666248 46.312263 0 63.97851l-148.369343 148.382915a45.136021 45.136021 0 0 1-31.998303 13.246294zM494.4559 783.404245a45.113401 45.113401 0 0 1-31.989256-13.255342c-17.666248-17.661724-17.666248-46.307739 0-63.983035l148.369343-148.373866c17.67982-17.661724 46.312263-17.6572 63.987559 0 17.666248 17.666248 17.666248 46.312263 0 63.983035l-148.378391 148.373866a45.072685 45.072685 0 0 1-31.989255 13.255342z"
                                p-id="28025" data-spm-anchor-id="a313x.search_index.0.i21.432b3a81JH1UTE" class=""
                                fill="var(--theme-color2)"></path>
                        </svg>
                    </div>
                </div>
                <motion.div class="ul" @hover-end="_Hide()">
                    <motion.li v-for="item in tabs" :key="item.label" tag="li" class="li" :initial="false" :style="{
                        color: item.label === selectedTab.label ? '#fff' : '#888888'
                    }" @hover-start="_Show(item)">
                        {{ `${item.label}` }}
                        <motion.div v-if="item.label === selectedTab.label" class="underline" layout-id="underline"
                            id="underline" />
                    </motion.li>
                    <AnimatePresence>
                        <motion.div v-if="selectedTabShow" :layout="true" class="li-info" :initial="{ opacity: 0 }"
                            :animate="{ opacity: 1 }" :transition="{ delay: 0.2 }">
                            <AnimatePresence mode="wait">
                                <motion.div :key="selectedTab ? selectedTab.label : 'empty'"
                                    :initial="{ y: 10, opacity: 0 }" :animate="{ y: 0, opacity: 1 }"
                                    :exit="{ y: -10, opacity: 0 }" :transition="{ duration: 0.2 }"
                                    style="font-size: 40px;">
                                    <div class="info">
                                        {{ selectedTab ? selectedTab.icon : "😋" }}李帅大牛逼
                                    </div>
                                </motion.div>
                            </AnimatePresence>
                        </motion.div>
                    </AnimatePresence>
                </motion.div>
            </div>
        </header>
        <div v-for="(item, index) in items" :key="index" :ref="moduleRefs[index]" class="module-box">
            <motion.div v-if="isInView[index]" class="components-box" :initial="{ scale: 0 }" :animate="{ scale: 1 }"
                :transition="{
                    type: 'spring',
                    stiffness: 260,
                    damping: 20,
                    delay: 0.3,
                }">
                <!-- 模块组件内容 -->
                <Hello_Bro v-if="index === 0"></Hello_Bro>
                <Character_Card v-else-if="index === 1"></Character_Card>
                <Submit_Btn v-else-if="index === 2"></Submit_Btn>
                <button class="xxx meet" @click="_Quit()" v-else-if="index === 3">退出</button>
                <div v-else>{{ item }}</div>
            </motion.div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.xxx {
    background: none;
    border: 0;
    box-sizing: border-box;
    margin: 1em;
    padding: 1em 2em;
    box-shadow: inset 0 0 0 2px #f45e61;
    color: #f45e61;
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
    transition: color 0.25s;
}

.xxx::before,
.xxx::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    width: 0;
    height: 0;
}

.xxx::before {
    top: 0;
    left: 0;
}

.xxx::after {
    bottom: 0;
    right: 0;
}

.xxx:hover {
    color: #60daaa;
}

.xxx:hover::before,
.xxx:hover::after {
    width: 100%;
    height: 100%;
}

.xxx:hover::before {
    border-top-color: #60daaa;
    border-right-color: #60daaa;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.xxx:hover::after {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet:hover {
    color: #fbca67;
}

.meet::after {
    top: 0;
    left: 0;
}

.meet:hover::before {
    border-top-color: #fbca67;
    border-right-color: #fbca67;
}

.meet:hover::after {
    border-bottom-color: #fbca67;
    border-left-color: #fbca67;
    transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}

.home-page {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    .user-box {
        width: 100px;
        height: 100px;
        position: fixed;
        top: 80px;
        right: 80px;
        z-index: 1;
        border: solid 1px rgba(0, 0, 0, 0.1);

        .box {
            width: 40px;
            height: 40px;
            background-image: url('@/assets/imgs/user.png');
            background-size: 100% 100%;
            border: solid 1px #000;
            border-radius: 0px;
        }
    }
}

.scroll-strip {
    position: fixed;
    z-index: 111;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--theme-color2);
    transform-origin: 0%;
}

.header-box {
    position: fixed;
    top: 0px;
    left: 10px;
    right: 10px;
    z-index: 150;
    display: flex;
    justify-content: center;

    .nav {
        background-color: #0c1012cc;
        backdrop-filter: blur(8px);
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        align-items: center;
        border-radius: 0 0 8px 8px;
        width: 100%;
        max-width: 980px;
    }

    .logo {
        float: left;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: red;
        box-sizing: border-box;
    }

    .text {
        float: left;
        color: #fff;
        font-family: 'Handsome';
        font-size: 20px;
        margin: 0 3px 0 16px;
        height: 34px;
        line-height: 34px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .theme {
        width: 68px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            height: 18px;
            cursor: pointer;
        }
    }

    .ul {
        display: flex;
    }

    .li {
        list-style: none;
        margin: 0;
        font-weight: 500;
        font-size: 12px;
        width: 100%;
        padding: 10px 16px;
        position: relative;
        cursor: pointer;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        min-width: 0;
        user-select: none;
    }

    .underline {
        position: absolute;
        border-radius: 50%;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: red;
    }

}

.li-info {
    position: fixed;
    top: 53px;
    left: 0px;
    right: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
    display: flex;
    justify-content: center;
    border-radius: 8px;

    .info {
        height: 400px;
        display: flex;
        align-items: center;
        color: #fff;
    }
}


.module-box {
    width: 100%;
    height: 101vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.components-box {
    width: 96vw;
    height: 90vh;
    margin-top: -1vh;
    border: solid 1px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>